// pages/feedback/index.js

// 1 点击“+”触发tap点击事件
//     1 调用小程序内置的选择若的api
//     2 获取到 图片的路径 数组
//     3 把图片路径 存到 data的变量中
//     4 页面就可以根据 图片数组 进行循环显示 自定义组件
// 2 点击 自定义图片 组件
//     1 获取被点击的元素的索引
//     2 获取data中的图片数组
//     3 根据索引 数组中删除对应的元素
//     4 把数组从新设置回datat中
// 3 点击“提交“
//     1 获取文本域的内容 类似 输入框的获取
//         1 data中定义变量 表示 输入框内容
//         2 文本域 绑定 输入事件 事件触发的时候 把输入框的值存入到变量中
//     2 对这些内容进行合法性验证
//     3 验证通过 用户选择的图片 上传到专门的服务器 返回图片外网了解
//         1 遍历图片数组
//         2 挨个上传
//         3 自己在维护图片数组 存放 图片上传后的外网连接
//     4 文本域 和外网的图片的路径 一起提交到服务器 前端的模拟 不会发送请求到后台
//     5 清空当前页面
//     6 返回上一页


Page({

    /**
     * 页面的初始数据
     */
    data: {
        tabs:[
            {
                id:0,
                value:"意见反馈",
                isActive:true
            },
            {
                id: 1,
                value: "商家投诉",
                isActive: false
            },
           
        ],
        // 文本域的内容
        textValue:"",
        // 被选中的图片数组
        chooseImgs:[],
        uploadImgs:[]


    },

      // 标题点击事件触发的函数 数据从子组件传过来
      handleTabsItemChange(e){
        // 1、获取被点击标题的索引
        // console.log(e)
        const {index} = e.detail;
        // console.log(index)
        // 2、修改原数组
        let {tabs} = this.data;
        tabs.forEach(
            (v,i)=>i===index?v.isActive=true:v.isActive=false
            
           )
        //    3、吧修改后的原数组赋值回去
        this.setData({
            tabs
        })
    },


    // 单击+号选择图片的方法
    handleChooseImg(){
        // 调用小程序内置的选择图片的api
        wx.chooseImage({
        // 同时选中的图片数量
          count:9,
        //   图片格式 原图 压缩
        sizeType:['original','compressed'],
        // 图片的来源 相册 照相机
        sourceType:['album','camera'],
        success:(result)=>{
            // console.log(result)
            this.setData({
                // 图片数组 进行拼接
                chooseImgs:[...this.data.chooseImgs,...result.tempFiles]
            })
        }

        })
    },


    // 点击删除元素事件
    handleRemoveImg(e){
        // 获取点击的组件的索引
        const {index} = e.currentTarget.dataset;
        // 获取data中的图片数组
        let {chooseImgs}=this.data;
        // 删除元素
        chooseImgs.splice(index,1);
        this.setData({
            chooseImgs
        })

    },

    // 文本域输入事件
    handleTextInput(e){
        // console.log(e)
        this.setData({
            textValue:e.detail.value

        })

    },

// 点击提交触发的事件
    handleFormubmit(){
        // 1 获取文本域的内容 图片数组
        const  {textValue,chooseImgs}=this.data;
        // 2 对文本域的内容进行合法性验证
        if(!textValue.trim()){
            // 不合法
            wx.showToast({
              title: '输入不合法',
              icon: 'none',
              mask: true,
            })
            return;
        }
        // 3 准备上传图片 到专门的服务器 
    //   显示图片上传等待的图片效果
    wx.showLoading({
      title: '正在上传中...',
      mask:true
    })

// 判断有没有需要上传的图片数组
if(chooseImgs.length != 0){
     // 上传文件的api不支持 多个文件同时上传 因此要遍历数组 挨个上传
     chooseImgs.forEach((v,i)=>{
        wx.uploadFile({
            // 被上传文件的路径
          filePath: v.path,
        //   上传文件的名称 后台通过该名称来获取文件数据
          name: 'file',
        //   图片要上传到哪里
          url: 'https://images.ac.cn/Home/Index/UploadAction/',
        //   顺带的文本信息
        formData:{},
        success:(result)=>{
            console.log(result)
            let url=JSON.parse(result.data).url;
            this.uploadImgs.push(url)
            // 当所有的图片上传完成之后才触发
            if(i===chooseImgs.length-1){
                // 关闭上传等待效果
                wx.hideLoading({});
                console.log("把文本的内容和外网的图片数组 提交到后台中")
                // 重定向到上一个页面
              wx.navigateBack({
                    delta: 1,
                   })
            }
        }
        })
    })

}else{
    wx.hideLoading({});
    console.log("只提交了文本")
    // 重定向到上一个页面
    wx.navigateBack({
      delta: 1,
    })

}
 



    }







   
})